<meta charset="UTF-8">


<button id="makeBtn">计算</button> <button id="clearBtn">清空</button><br />
<br />
IP地址：<input type="text" id="ip_input" style="margin-left: 17px;" />
<span id="ip_input_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="ip_input_ip" style="font-family: Consolas;"></span>
<br />
子网掩码：<input type="text" id="mask_input" />
<span id="mask_input_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="mask_input_ip" style="font-family: Consolas;"></span>
<br />
可用数量：<input type="text" id="count_input" /><br />
网络地址：<input type="text" id="network_address" />
<span id="network_address_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="network_address_ip" style="font-family: Consolas;"></span>
<br />
第一可用：<input type="text" id="first_address" />
<span id="first_address_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="first_address_ip" style="font-family: Consolas;"></span>
<br />
最后可用：<input type="text" id="last_address" />
<span id="last_address_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="last_address_ip" style="font-family: Consolas;"></span>
<br />
广播地址：<input type="text" id="gb_adress" />
<span id="gb_adress_two" style="font-family: Consolas;"></span>&nbsp;&nbsp;
<span id="gb_adress_ip" style="font-family: Consolas;"></span>
<br />

<script type="module">

import IpAddress from "../utils/ip-address.js";

/** @type { HTMLButtonElement } */ const makeBtn = document.querySelector("#makeBtn");
/** @type { HTMLButtonElement } */ const clearBtn = document.querySelector("#clearBtn");

/** @type { HTMLInputElement } */ const ip_input = document.querySelector("#ip_input");
/** @type { HTMLSpanElement } */ const ip_input_two = document.querySelector("#ip_input_two");
/** @type { HTMLSpanElement } */ const ip_input_ip = document.querySelector("#ip_input_ip");

/** @type { HTMLInputElement } */ const mask_input = document.querySelector("#mask_input");
/** @type { HTMLSpanElement } */ const mask_input_two = document.querySelector("#mask_input_two");
/** @type { HTMLSpanElement } */ const mask_input_ip = document.querySelector("#mask_input_ip");

/** @type { HTMLInputElement } */ const count_input = document.querySelector("#count_input");

/** @type { HTMLInputElement } */ const network_address = document.querySelector("#network_address");
/** @type { HTMLSpanElement } */ const network_address_two = document.querySelector("#network_address_two");
/** @type { HTMLSpanElement } */ const network_address_ip = document.querySelector("#network_address_ip");

/** @type { HTMLInputElement } */ const first_address = document.querySelector("#first_address");
/** @type { HTMLSpanElement } */ const first_address_two = document.querySelector("#first_address_two");
/** @type { HTMLSpanElement } */ const first_address_ip = document.querySelector("#first_address_ip");

/** @type { HTMLInputElement } */ const last_address = document.querySelector("#last_address");
/** @type { HTMLSpanElement } */ const last_address_two = document.querySelector("#last_address_two");
/** @type { HTMLSpanElement } */ const last_address_ip = document.querySelector("#last_address_ip");

/** @type { HTMLInputElement } */ const gb_adress = document.querySelector("#gb_adress");
/** @type { HTMLSpanElement } */ const gb_adress_two = document.querySelector("#gb_adress_two");
/** @type { HTMLSpanElement } */ const gb_adress_ip = document.querySelector("#gb_adress_ip");

makeBtn.onclick = function () {
    const inputIp = IpAddress.parseIp(ip_input.value);
    const inputMask = IpAddress.parseMask(mask_input.value);
    const info = IpAddress.getMaskRange(inputIp, inputMask);

    ip_input_two.innerHTML = inputIp.bin;
    ip_input_ip.innerHTML = inputIp.ip;

    mask_input_two.innerHTML = inputMask.bin;
    mask_input_ip.innerHTML = inputMask.ip;

    count_input.value = info.count;

    network_address.value = info.network.ip;
    network_address_two.innerHTML = info.network.bin;
    network_address_ip.innerHTML = info.network.ip;

    first_address.value = info.first.ip;
    first_address_two.innerHTML = info.first.bin;
    first_address_ip.innerHTML = info.first.ip;

    last_address.value = info.end.ip;
    last_address_two.innerHTML = info.end.bin;
    last_address_ip.innerHTML = info.end.ip;

    gb_adress.value = info.broadcast.ip;
    gb_adress_two.innerHTML = info.broadcast.bin;
    gb_adress_ip.innerHTML = info.broadcast.ip;
};

clearBtn.onclick = function () {
    ip_input.value = "";
    ip_input_two.innerHTML = "";
    ip_input_ip.innerHTML = "";

    mask_input.value = "";
    mask_input_two.innerHTML = "";
    mask_input_ip.innerHTML = "";

    count_input.value = "";

    network_address.value = "";
    network_address_two.innerHTML = "";
    network_address_ip.innerHTML = "";

    first_address.value = "";
    first_address_two.innerHTML = "";
    first_address_ip.innerHTML = "";

    last_address.value = "";
    last_address_two.innerHTML = "";
    last_address_ip.innerHTML = "";

    gb_adress.value = "";
    gb_adress_two.innerHTML = "";
    gb_adress_ip.innerHTML = "";
};

</script>
